{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        div[class="el-input"] {
            width: 220px;
        }
    </style>
    <div id="app">
        <el-row>
            <div style="float: right">
                <el-input v-model="search" placeholder="请输入书名"></el-input>
                <el-button type="primary" @click="searchSub">查找</el-button>
            </div>
        </el-row>
        <br/>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="uuid" label="小说编号" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="novel_name" label="小说名称" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="user_qq" label="评论QQ" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="user_name" label="评论用户" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="comment" label="评论内容" width="400" show-overflow-tooltip></el-table-column>
            <el-table-column prop="other" label="其他操作" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>

        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page @current-change="current_change" :current-page="currentPage"></el-pagination>

    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var Main = {
            data() {
                return {
                    search: "{{ request.GET.search }}",
                    total: {{ page.num_pages }}0,
                    currentPage: {{ dataList.number }},
                    tableData: [
                        {% for data in dataList.object_list %}
                            {
                                'uuid': '{{ data.uuid }}',
                                'novel_name': '{{ data.content_uuid.novel_name }}',
                                'comment': '{{ data.comment_txt }}',
                                'user_qq': '{{ data.user_qq }}',
                                'user_name': '{{ data.user_name }}'
                            }
                        {% endfor %}
                    ],
                }
            }
            , methods: {
                handleDelete: function (index, row) {
                    Delete(this, index, row);
                },
                handleSelectionChange: function (val) {
                    this.multipleSelection = val;
                },
                current_change: function (currentPage) {
                    window.location.href = '?page=' + currentPage + '&search=' + this.search;
                },
                searchSub: function () {
                    if (this.search === '') {
                        this.$message.error('请输入查找值...');
                        return NaN
                    }
                    window.location.href = '{% url 'admin_system:comment' %}?search=' + this.search;
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
{% endblock %}